<!-- 简历新增 -->
<template>
  <div>
    <div class="eda-main-title">
      <div class="top-icon">
        <img src="../../../assets/img/personnelImage/创建流程图.png"/>
      </div>
      <div class="top-title">
        个人简历 - 创建
      </div>
      <div class="top-operate">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="primary" @click="this.$router.push({path: '/per/recruit/atl'})">取消</el-button>
      </div>
    </div>
    <div class="eda-main">
      <div class="main-middle">
          <div class="tab-container"  style="min-height: 370px">
            <el-tabs v-model="ResumeFillingTable" type="border-card">
              <el-tab-pane name="tab1" label="基本信息填写">
                <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
                         size="default" @submit.prevent>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>姓名：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="name" class="required">
                        <el-input v-model="formData.name" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>性别：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="sex" class="required">
                        <el-select v-model="formData.sex" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label" :value="item.value"
                                     :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>个人照片：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="personalPhoto">
                        <el-upload
                            class="avatar-uploader"
                            :show-file-list="false"
                            :headers="config"
                            ref="upload"
                            action="http://localhost:8001/emp/resume/image"
                            :on-change="handleAvatarSuccess"
                            :on-success="handle_success"
                            :auto-upload="false"
                        >
                          <img v-if="dialogImageUrlShow"
                               v-bind:src="menu.imgUrlBase64"
                               width="178"
                               height="178"
                               class="avatar"/>
                          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                        <el-button type="success" round @click="imgins">上传照片</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>联系电话：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="contactPhone" class="required">
                        <el-input v-model="formData.contactPhone" type="text"
                                  oninput="value=value.replace(/[^\d]/g,'');"
                                  clearable maxlength="11"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>电子邮件：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="email" class="required">
                        <el-input v-model="formData.email" type="text" maxlength="20"
                                  onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
                                  onafterpaste="this.value=this.value.replace(/[^\d]/g,'')"
                                  placeholder="QQ账号">
                          <template #append>@qq.com</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3"  class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>身份证：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="idCard" class="required">
                        <el-input v-model="formData.idCard" type="text" clearable maxlength="14"
                                  oninput="value=value.replace(/[^\d]/g,'');"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div>毕业院校：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="graduationInstitutions">
                        <el-input v-model="formData.graduationInstitutions" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>所学专业：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="major">
                        <el-input v-model="formData.major" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>家庭地址：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="domicilePlace">
                        <el-input v-model="formData.domicilePlace" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div>政治面貌：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="politics">
                        <el-select v-model="formData.politics" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in politicsOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>民族：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="nation">
                        <el-select v-model="formData.nation" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in nationOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>籍贯（祖籍）：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="nativePlace">
                        <el-input v-model="formData.nativePlace" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div>毕业时间：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="graduationDate">
                        <el-date-picker v-model="formData.graduationDate" type="date" class="full-width-input"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>出生日期：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="brith">
                        <el-date-picker v-model="formData.brith" type="date" class="full-width-input"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>身高：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="height">
                        <el-input v-model="formData.height" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div>健康状态：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="health">
                        <el-input v-model="formData.health" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>最高学历：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="highestEducation">
                        <el-select v-model="formData.highestEducation" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in highestEducationOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>学位：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="academicDegree">
                        <el-select v-model="formData.academicDegree" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in academicDegreeOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div>兴趣爱好：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="hobbies">
                        <el-input v-model="formData.hobbies" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>应用能力：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="computerApplicationAbility">
                        <el-input v-model="formData.computerApplicationAbility" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>计算机证书：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="computerGradeCertificate">
                        <el-input v-model="formData.computerGradeCertificate" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" class="grid-cell">
                      <div class="static-content-item">
                        <div>婚姻状况：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="wedlock">
                        <el-select v-model="formData.wedlock" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in wedlockOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>自我评价：</div>
                      </div>
                    </el-col>
                    <el-col :span="4" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="selfEvaluation">
                        <el-input v-model="formData.selfEvaluation" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1" class="grid-cell">
                      <div class="static-content-item">
                        <div>备注：</div>
                      </div>
                    </el-col>
                    <el-col :span="5" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="remark">
                        <el-input v-model="formData.remark" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
              <el-tab-pane name="tab2" label="教育经验填写">
                <el-button @click="countChange(++num)">+</el-button>
                <el-button @click="countChange(--num)">-</el-button>
                <el-table
                    :data="edexTable"
                    border
                    style="width: 100%; margin-top: 20px"
                >
                  <el-table-column prop="phase" label="阶段" width="180">
                    <template #default="scope">
                      <el-input v-model="scope.row.phase"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="admissionDate" label="入学时间">
                    <template #default="scope">
                      <el-date-picker
                          v-model="scope.row.admissionDate"
                          type="date" class="full-width-input" format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD" clearable/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="graduationDate" label="毕业时间">
                    <template #default="scope">
                      <el-date-picker
                          v-model="scope.row.graduationDate"
                          type="date" class="full-width-input" format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD" clearable/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="school" label="学校">
                    <template #default="scope">
                      <el-input v-model="scope.row.school"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="major" label="专业">
                    <template #default="scope">
                      <el-input v-model="scope.row.major"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="tab3" label="工作经验填写">
                <el-button @click="saexTr(++saexNUm)">+</el-button>
                <el-button @click="saexTr(--saexNUm)">-</el-button>
                <el-table
                    :data="saexTable"
                    border
                    style="width: 100%; margin-top: 20px"
                >
                  <el-table-column prop="hireDate" label="入职日期">
                    <template #default="scope">
                      <el-date-picker
                          v-model="scope.row.hireDate"
                          type="date" class="full-width-input" format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD" clearable/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="departureDate" label="离职日期">
                    <template #default="scope">
                      <el-date-picker
                          v-model="scope.row.departureDate"
                          type="date" class="full-width-input" format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD" clearable/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="company" label="公司">
                    <template #default="scope">
                      <el-input v-model="scope.row.company"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="position" label="职位">
                    <template #default="scope">
                      <el-input v-model="scope.row.position"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="tab4" label="简历信息分类填写">
                <el-form :model="reclTable" ref="vForm" :rules="rules" label-position="left" label-width="80px"
                         size="default" @submit.prevent>
                  <el-row>
                    <el-col :span="5" :offset="4" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>简历来源:</div>
                      </div>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="source" class="required">
                        <el-select v-model="reclTable.source" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5" :offset="4" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>简历类别：</div>
                      </div>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="type" class="required">
                        <el-select v-model="reclTable.type" class="full-width-input" clearable>
                          <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5" :offset="4" class="grid-cell">
                      <div class="static-content-item">
                        <div><span style="color: rgb(203,56,56)">*</span>应聘岗位：</div>
                      </div>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="" label-width="0" prop="positionId" class="required">
                        <el-input v-model="reclTable.positionName" type="text" @focus="dialogTableVisible = true" readonly></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogTableVisible" title="可应聘岗位">
    <el-table :data="ypgwOptions" @row-click="byval">
      <el-table-column property="id" label="招聘需求编号" width="200" />
      <el-table-column property="positionId" label="岗位编号" width="140" />
      <el-table-column property="num" label="招收人数" width="140" />
      <el-table-column property="positionName" label="岗位名称" width="auto"/>
    </el-table>
  </el-dialog>
</template>

<script>
import index from '../../../assets/js/personnelJs/ResFilling.js';
export default index;
</script>


<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp.scss";
.static-content-item{
  margin-left: 0;
  margin-top: 7px;
}

div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>